<div class="dashboard-story js-dashboard-story spec__dashboard-story single-article <%= "story-unpublished" unless article.published %> <%= "js-dashboard-story story-archived hidden" if article.archived %>">
  <div class="dashboard-story__title">
    <h3 class="flex items-center">
      <% if article.archived %>
        <span class="c-indicator c-indicator--danger mr-2 fw-normal whitespace-nowrap"><%= t("views.dashboard.article.archived") %></span>
      <% end %>
      <a href="<%= article.current_state_path %>" class="inline-flex items-center">
        <% if article.organization_id %>
          <span class="crayons-logo crayons-logo--s mr-2 shrink-0">
            <img class="crayons-logo__image align-top" src="<%= article.organization&.profile_image_90 %>" alt="<%= article.organization&.name %>" width="24" height="24" loading="lazy" />
          </span>
        <% end %>
        <%= article.title %>
      </a>
    </h3>
    <% if article.published %>
      <p class="fs-s color-base-60 js-dashboard-story-details">
        <strong class="fw-medium"><%= t("views.dashboard.article.#{article.scheduled? ? 'scheduled_at' : 'published'}") %></strong>
        <%= local_date(article.published_timestamp, show_year: article.displayable_published_at&.year != Time.current.year) %>
        <% if article.edited? %>
          <strong class="fw-medium pl-2"><%= t("views.dashboard.article.edited") %></strong>
          <%= local_date(article.edited_at, show_year: article.edited_at.year != Time.current.year) %>
        <% end %>
        <% if article.collection_id %>
          <strong class="fw-medium pl-2"><%= t("views.dashboard.article.series") %></strong> <%= article.series %>
        <% end %>
        <% if article.language %>
          <strong class="fw-medium pl-2"><%= t("views.dashboard.article.language") %></strong> <%= t(article.language, scope: "languages.display_name") %>
        <% end %>
      </p>
    <% end %>
  </div>

  <div class="fs-s color-base-60">
    <% if !article.published? %>
      <a href="<%= article.path %>/edit" class="c-indicator c-indicator--warning"><%= t("views.dashboard.article.draft") %></a>
    <% elsif article.scheduled? %>
      <a href="<%= article.path %>/edit" class="c-indicator c-indicator--warning"><%= t("views.dashboard.article.scheduled") %></a>
    <% else %>
      <div class="flex flex-nowrap whitespace-nowrap" data-analytics-pageviews data-article-id="<%= article.id %>">
        <span class="flex items-center p-1" title="<%= t("views.dashboard.article.reactions.title") %>">
          <%= crayons_icon_tag("small-heart", class: "mr-1", title: t("views.dashboard.article.reactions.icon")) %>
          <% if article.published %>
            <%= article.public_reactions_count %>
          <% else %>
            0
          <% end %>
        </span>

        <span class="flex items-center p-1 ml-1" title="<%= t("views.dashboard.article.comments.title") %>">
          <%= crayons_icon_tag("small-comment", class: "mr-1", title: t("views.dashboard.article.comments.icon")) %>
          <span class="spec__comments-count">
            <%= article.comments_count %>
          </span>
        </span>

        <span class="flex items-center p-1 ml-1" title="<%= t("views.dashboard.article.views.title") %>">
          <%= crayons_icon_tag("small-eye", class: "mr-1", title: t("views.dashboard.article.views.icon")) %>
          <% if article.published %>
            <% if article.page_views_count > 25 %>
              <%= article.page_views_count %>
            <% else %>
              <%= t("views.dashboard.article.views.lt_25") %>
            <% end %>
          <% else %>
            0
          <% end %>
        </span>

        <% if article.user_subscriptions_count > 0 %>
          <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="flex items-center crayons-btn crayons-btn--ghost-dimmed crayons-btn--s" title="<%= t("views.dashboard.article.subscriptions.title") %>">
            <%= crayons_icon_tag("small-data", class: "mr-1", title: t("views.dashboard.article.subscriptions.icon")) %>
            <%= article.user_subscriptions_count %>
          </a>
        <% end %>
      </div>
    <% end %>
  </div>

  <div class="dashboard-story__actions">
    <% if manage_view %>
      <a href="<%= article.path %>/delete_confirm" data-no-instant class="crayons-btn crayons-btn--ghost-danger crayons-btn--s"><%= t("views.dashboard.article.delete") %></a>

      <% if article.profile_pins.any? %>
        <%= form_for(article.profile_pins.first) do |f| %>
          <button class="crayons-btn crayons-btn--ghost crayons-btn--s"><%= t("views.dashboard.article.unpin") %></button>
        <% end %>
      <% else %>
        <%= form_for(ProfilePin.new) do |f| %>
          <%= f.hidden_field :pinnable_id, value: article.id %>
          <button class="crayons-btn crayons-btn--ghost crayons-btn--s" title="<%= t("views.dashboard.article.pin.title") %>"><%= t("views.dashboard.article.pin.text") %></button>
        <% end %>
      <% end %>
    <% elsif article.published && !article.scheduled? %>
      <a href="<%= article.path %>/manage" class="crayons-btn crayons-btn--ghost crayons-btn--s" aria-label="<%= t("views.dashboard.article.manage.aria_label", title: article.title) %>"><%= t("views.dashboard.article.manage.text") %></a>
    <% elsif @user == article.user %>
      <a href="<%= article.path %>/delete_confirm" data-no-instant class="crayons-btn crayons-btn--ghost-danger crayons-btn--s"><%= t("views.dashboard.article.delete") %></a>
    <% end %>
    <a href="<%= article.path %>/edit" class="crayons-btn crayons-btn--ghost crayons-btn--s" aria-label="<%= t("views.dashboard.article.edit.aria_label", title: article.title) %>"><%= t("views.dashboard.article.edit.text") %></a>

    <div class="js-ellipsis-menu relative inline-block">
      <button id="ellipsis-menu-trigger-<%= article.id %>" aria-controls="ellipsis-menu-dropdown-<%= article.id %>" aria-expanded="false" aria-haspopup="true" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon">
        <%= crayons_icon_tag("overflow-horizontal", title: t("views.dashboard.article.more.title", title: article.title)) %>
      </button>

      <div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 align-left js-ellipsis-menu-dropdown">
        <% if article.user_subscriptions_count > 0 %>
          <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="crayons-link crayons-link--block w-100"><%= t("views.dashboard.article.subscriptions.number", num: article.user_subscriptions_count) %></a>
        <% end %>
        <a href="<%= article.path %>/stats" class="crayons-link crayons-link--block w-100"><%= t("views.dashboard.article.stats") %></a>
        <%= form_for(article, method: :patch, remote: true, authenticity_token: true, html: { "data-type": "json", class: "js-archive-toggle" }) do |f| %>
          <%= f.hidden_field :archived, value: !article.archived, id: "article_archived_#{article.id}" %>
          <%= f.hidden_field :from_dashboard, value: 1 %>

          <button type="submit" class="crayons-link crayons-link--block w-100 border-0 bg-transparent">
            <%= t("views.dashboard.article.#{article.archived ? 'unarchive' : 'archive'}") %>
          </button>
        <% end %>
        <% if organization && org_admin %>
          <%= form_for(article, html: { class: "mt-4 pt-4 border-0 border-t-1 border-color-base-10 border-solid" }) do |f| %>
            <input type="hidden" name="destination" value="/dashboard/organization/<%= organization.id %>" />

            <div class="crayons-field mb-4">
              <label for="user_id" class="crayons-field__label"><%= t("views.dashboard.article.author") %></label>
              <%= f.select :user_id, options_for_select(organization.users.pluck(:name, :id), article.user_id), {}, { class: "crayons-select #{article_series ? 'disabled' : ''}", disabled: article_series } %>
              <%= f.hidden_field :from_dashboard, value: 1 %>
              <% if article_series %>
                  <div class="disabled-info-container">
                    <%= crayons_icon_tag("info", class: "disabled-info-icon", title: t("views.dashboard.article.icon")) %>
                    <p class="disabled-info-text"><%= t("views.dashboard.article.series_author_change_warning") %></p>
                  </div>
              <% end %>
            </div>

            <% unless article_series %>
              <div class="crayons-field mb-4">
                <label for="co_author_ids" class="crayons-field__label"><%= t("views.dashboard.article.co_authors") %></label>
                <div class="crayons-field">
                  <%= f.text_field :co_author_ids_list,
                                   id: "article_#{article.id}_co_author_ids_list",
                                   class: "article_org_co_author_ids_list",
                                   data: {
                                     fetch_users: organization_members_path(organization.username, format: "json")
                                   } %>
                </div>
                <%= f.hidden_field :from_dashboard, value: 1 %>
              </div>
            <% end %>

            <button type="submit" class="crayons-btn"><%= t("views.dashboard.article.save") %></button>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>
